<template>
  <text class="uni-tag" v-if="text" :class="classes" :style="customStyle" @click="onClick">{{text}}</text>
</template>

<script>
  /**
   * Tag 标签
   * @description 用于展示1个或多个文字标签，可点击切换选中、不选中的状态
   * @tutorial https://ext.dcloud.net.cn/plugin?id=35
   * @property {String} text 标签内容
   * @property {String} size = [default|small|mini] 大小尺寸
   * 	@value default 正常
   * 	@value small 小尺寸
   * 	@value mini 迷你尺寸
   * @property {String} type = [default|primary|success｜warning｜error]  颜色类型
   * 	@value default 灰色
   * 	@value primary 蓝色
   * 	@value success 绿色
   * 	@value warning 黄色
   * 	@value error 红色
   * @property {Boolean} disabled = [true|false] 是否为禁用状态
   * @property {Boolean} inverted = [true|false] 是否无需背景颜色（空心标签）
   * @property {Boolean} circle = [true|false] 是否为圆角
   * @event {Function} click 点击 Tag 触发事件
   */

  export default {
    name: "UniTag",
    emits: ['click'],
    props: {
      type: {
        // 标签类型default、primary、success、warning、error、royal
        type: String,
        default: "default"
      },
      size: {
        // 标签大小 normal, small
        type: String,
        default: "normal"
      },
      // 标签内容
      text: {
        type: String,
        default: ""
      },
      disabled: {
        // 是否为禁用状态
        type: [Boolean, String],
        default: false
      },
      inverted: {
        // 是否为空心
        type: [Boolean, String],
        default: false
      },
      circle: {
        // 是否为圆角样式
        type: [Boolean, String],
        default: false
      },
      mark: {
        // 是否为标记样式
        type: [Boolean, String],
        default: false
      },
      customStyle: {
        type: String,
        default: ''
      }
    },
    computed: {
      classes() {
        const {
          type,
          disabled,
          inverted,
          circle,
          mark,
          size,
          isTrue
        } = this
        const classArr = [
          'uni-tag--' + type,
          'uni-tag--' + size,
          isTrue(disabled) ? 'uni-tag--disabled' : '',
          isTrue(inverted) ? 'uni-tag--' + type + '--inverted' : '',
          isTrue(circle) ? 'uni-tag--circle' : '',
          isTrue(mark) ? 'uni-tag--mark' : '',
          // type === 'default' ? 'uni-tag--default' : 'uni-tag-text',
          isTrue(inverted) ? 'uni-tag--inverted uni-tag-text--' + type : '',
          size === 'small' ? 'uni-tag-text--small' : ''
        ]
        // 返回类的字符串，兼容字节小程序
        return classArr.join(' ')
      }
    },
    methods: {
      isTrue(value) {
        return value === true || value === 'true'
      },
      onClick() {
        if (this.isTrue(this.disabled)) return
        this.$emit("click");
      }
    }
  };
</script>

<style lang="scss" scoped>
  $uni-primary: #2979ff !default;
  $uni-success: #18bc37 !default;
  $uni-warning: #f3a73f !default;
  $uni-error: #e43d33 !default;
  $uni-info: #8f939c !default;


  $tag-default-pd: 4px 7px;
  $tag-small-pd: 2px 5px;
  $tag-mini-pd: 1px 3px;

  .uni-tag {
    line-height: 14px;
    font-size: 12px;
    font-weight: 200;
    padding: $tag-default-pd;
    color: #fff;
    border-radius: 3px;
    background-color: $uni-info;
    border-width: 1rpx;
    border-style: solid;
    border-color: $uni-info;
    /* #ifdef H5 */
    cursor: pointer;
    /* #endif */

    // size attr
    &--default {
      font-size: 12px;
    }

    &--default--inverted {
      color: $uni-info;
      border-color: $uni-info;
    }

    &--small {
      padding: $tag-small-pd;
      font-size: 12px;
      border-radius: 2px;
    }

    &--mini {
      padding: $tag-mini-pd;
      font-size: 12px;
      border-radius: 2px;
    }

    // type attr
    &--primary {
      background-color: $uni-primary;
      border-color: $uni-primary;
      color: #fff;
    }

    &--success {
      color: #fff;
      background-color: $uni-success;
      border-color: $uni-success;
    }

    &--warning {
      color: #fff;
      background-color: $uni-warning;
      border-color: $uni-warning;
    }

    &--error {
      color: #fff;
      background-color: $uni-error;
      border-color: $uni-error;
    }

    &--primary--inverted {
      color: $uni-primary;
      border-color: $uni-primary;
    }

    &--success--inverted {
      color: $uni-success;
      border-color: $uni-success;
    }

    &--warning--inverted {
      color: $uni-warning;
      border-color: $uni-warning;
    }

    &--error--inverted {
      color: $uni-error;
      border-color: $uni-error;
    }

    &--inverted {
      background-color: #fff;
    }

    // other attr
    &--circle {
      border-radius: 15px !important;
    }

    &--mark {
      border-top-left-radius: 0 !important;
      border-bottom-left-radius: 0 !important;
      border-top-right-radius: 15px !important;
      border-bottom-right-radius: 15px !important;
    }

    &--disabled {
      opacity: 0.5;
      /* #ifdef H5 */
      cursor: not-allowed;
      /* #endif */
    }
  }


  .uni-tag-text {
    color: #fff;
    font-size: 14px;

    &--primary {
      color: $uni-primary;
    }

    &--success {
      color: $uni-success;
    }

    &--warning {
      color: $uni-warning;
    }

    &--error {
      color: $uni-error;
    }

    &--small {
      font-size: 12px;
    }
  }
</style>
